<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns:jsf="http://xmlns.jcp.org/jsf"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"> 
    <h:form>
        <input type="submit" class="button" value="Nova Música" style="width:100px;" jsf:action="${songManagedBean.openNew()}"/>
        <br/>
        <br/>
        <fieldset>
            <legend> Consulta de Música </legend>
            <div class="messagesContainer"><h:messages warnClass="warnMessages" class="messages"/></div>
            <h:panelGroup id="listSongs" rendered="${not empty songManagedBean.list}">
                <table class="tableConsulta">
                    <thead>
                        <tr>
                            <td>Título</td>
                            <td>Gênero</td>
                            <td>Álbum</td>
                            <td>Duração</td>
                            <td>Compositor(es)</td>
                            <td>Editar</td>
                            <td>Excluir</td>
                        </tr>
                    </thead>
                    <tbody>
                    <ui:repeat value="${songManagedBean.list}" var="song">
                        <tr>
                            <td>${song.title}</td>
                            <td>${song.genre.name}</td>
                            <td>${song.album.title}</td>
                            <td>${song.durationMinutes} minutos(s)</td>
                            <td>
                                <ui:repeat value="${song.composers}" var="composer">
                                   ${composer.name}
                                   <br/>
                                </ui:repeat>
                                
                            </td>
                            <td>
                                <input type="submit" class="buttonEdit" jsf:action="${songManagedBean.openToUpdate()}" value="">
                                     <f:param value="${song.id}" name="id"/>
                                </input>
                        </td>
                        <td>
                            <input type="submit" class="buttonDelete" jsf:action="${songManagedBean.delete()}" value="">
                        <f:param value="${song.id}" name="id"/>
                        </input>
                        </td>
                        </tr>
                    </ui:repeat>   
                    </tbody>
                </table>
            </h:panelGroup>
            <h:panelGroup rendered="${empty songManagedBean.list}">
                <br/>
                Ainda não há músicas cadastradas.
            </h:panelGroup>
        </fieldset>


    </h:form>


</html>